<template>
  <div class="height100">
    <LsRadioButtonPanel v-model="selectedButton" :buttons="buttons">
      <!--如果需要每次切换面板后重新渲染，可以去掉keep-alive-->
      <keep-alive>
        <component :is="selectedButton?.panelName" :radioButton="selectedButton"></component>
      </keep-alive>
    </LsRadioButtonPanel>
  </div>
</template>

<script>
import Vue from "vue";
import LsRadioButtonPanel from "../LsRadioButtonPanel.vue";
import RadioButtonPanelTestA from "./RadioButtonPanelTestA.vue";
import RadioButtonPanelTestB from "./RadioButtonPanelTestB.vue";

export default Vue.extend({
  name: "RadioButtonPanel",
  components: {LsRadioButtonPanel, RadioButtonPanelTestA, RadioButtonPanelTestB},
  data() {
    return {
      buttons: [
        {
          name: '按钮1',
          selected: true,
          panelName: 'RadioButtonPanelTestA'
        },
        {
          name: '按钮2',
          selected: false,
          panelName: 'RadioButtonPanelTestB'
        }
      ],
      selectedButton: null
    }
  },
  created() {
    this.selectedButton = this.buttons[0];
  }
})
</script>

<style>

</style>
